<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>


    <div id="app1">

        <!-- 下拉框单选 -->
        <div style="margin-bottom: 60px">
            <h4>下拉框单选:</h4>
            <select v-model="selected">

                <!-- 如果 option 中没有 value 属性, 则匹配 text, 如果有 value 属性,则匹配 value 属性对应的值-->
                <option>html</option>
                <option value="js">JavaScript</option>
                <option>CSS</option>
            </select>
            <p>选择的是: {{ selected }}</p>
            <br>
        </div>


        <!-- 下拉框多选 -->
        <div style="margin-bottom: 60px">
            <h4>下拉框多选:</h4>
            <select v-model="selected_mult" multiple>

                <!-- 如果 option 中没有 value 属性, 则匹配 text, 如果有 value 属性,则匹配 value 属性对应的值-->
                <option>html</option>
                <option value="js">JavaScript</option>
                <option>CSS</option>
            </select>
            <p>选择的是: {{ selected_mult }}</p>
            <br>
        </div>


        <!-- 在业务中, <option> 会使用 v-for 动态输出, value 和 text 用 v-bind 动态输出 -->
        <div>
            <select v-model="selected2">
                <option v-for="option in options" :value="option.value">{{ option.text }}</option>

            </select>
            <p>选择的项是: {{ selected2 }}</p>

        </div>



    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                selected: "html",
                selected_mult: [],
                selected2: 'html',
                options: [
                    {
                        text: 'HTML',
                        value: 'html'
                    },
                    {
                        text: 'Javascript',
                        value: 'js'
                    },
                    {
                        text: 'CSS',
                        value: 'css'
                    }
                ]

            }
        });


    </script>

</body>
</html>